<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>登录</title>
    <!--网站图标-->
    <link rel="shortcut icon" href="../../images/favicon.ico">
    <!-- 样式 -->
    <link rel="stylesheet" href="../../css/login.css">
    <link rel="stylesheet" href="../../element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="../../js/vue.js"></script>
    <!-- 引入axios库 -->
    <script src="../../js/axios.min.js"></script>
    <script src="../../element-ui/lib/index.js"></script>
</head>
<body>
<div id="login_form">
    <div>
        <h1>宠物领养系统·助力流浪宠物回归家庭</h1>
    </div>
    <div class="container">
        <form class="signUp">
            <h3>注册新账号 !</h3>
            <p>请输入您的登录账户</br>
                以及您的登录密码，注意两次输入要一致.
            </p>
            <input type="text" placeholder="输入您的账户" v-model="username" reqired autocomplete='off'/>
            <input type="password" placeholder="输入密码" v-model="password" reqired/>
            <input type="password" placeholder="再次输入密码" v-model="password1" @keyup.enter="logonNew" reqired/>
            <button class="form-btn sx log-in" type="button">已有账户</button>
            <button class="form-btn dx" type="button" @click="logonNew">注册</button>
        </form>
        <form class="signIn">
            <h3>欢迎回来 !</h3>
            <p>- 宠物那么可爱，要好好保护它们 -</p>
            <input type="text" placeholder="请输入账户" v-model="username" autocomplete='off' reqired/>
            <input type="password" placeholder="请输入密码" v-model="password" @keyup.enter="loginByPwd" reqired/>
            <br><br><br>
<!--            <div id="div_button" @click="goPhone">-->
<!--                <p style="font-size: 20px;">手机验证码登录</p></div>-->
            <button class="form-btn sx back" type="button">注册</button>
            <button class="form-btn dx" type="button" @click="loginByPwd" >登录</button>
        </form>
    </div>
</div>
</body>

<!--引人jQuery:页面模板效果是基于jQuery的。-->
<script src="../../js/jquery-3.6.4.min.js"></script>
<script>
    $(document).ready(function () {
        $(".log-in").click(function () {
            $(".signIn").addClass("active-dx");
            $(".signUp").addClass("inactive-sx");
            $(".signUp").removeClass("active-sx");
            $(".signIn").removeClass("inactive-dx");
        });

        $(".back").click(function () {
            $(".signUp").addClass("active-sx");
            $(".signIn").addClass("inactive-dx");
            $(".signIn").removeClass("active-dx");
            $(".signUp").removeClass("inactive-sx");
        });
    });
</script>
<script>
    new Vue({
        el: '#login_form',
        data() {
            return {
                //表单数据
                username: '',
                password: '',
                password1: '',

                //校验码：-1为未通过校验
                checkCode: -1
            };
        },
        methods: {
            /*-----------------注册、登录操作-------------------*/
            //注册请求
            logonNew() {
                this.checkInput();
                //校验未通过
                if (this.checkCode == -1) {
                    return;
                }
                //校验两次输入
                if (this.password1 != this.password) {
                    this.$message.error({
                        message: '两次输入密码不一致',
                    });
                    return;
                }
                //把数据模型存到对象中
                const _this = this;
                const _window = window;
                //通过验证，发送注册请求
                axios.post("/users/logon", {"userAccount": this.username, "userPassword": this.password}).then(
                    function (response) {
                        //获取到响应信息，如果注册成功进行提示
                        console.log(response.data);
                        if (response.data.code == 1) {
                            //提示框
                            _this.$message({
                                message: '注册成功，快去用您的新账户登录吧',
                                type: 'success'
                            });
                            _this.password = '';
                            //页面跳转
                            $(".signIn").addClass("active-dx");
                            $(".signUp").addClass("inactive-sx");
                            $(".signUp").removeClass("active-sx");
                            $(".signIn").removeClass("inactive-dx");
                        } else {
                            //注册失败则显示提示信息
                            _this.$message.error(response.data.msg);
                        }
                    },
                    function (err) {
                        //请求失败，友好的提示框
                        _this.$message.error("服务器繁忙，请稍后重试");
                        //控制台打印信息
                        console.log(err);
                    });
            },
            //登录请求
            loginByPwd() {
                this.checkInput();
                //校验未通过
                if (this.checkCode == -1) {
                    return;
                }
                //把数据模型存到对象中
                const _this = this;
                const _window = window;
                //通过验证，发送登录请求
                axios.post("/users/login", {"userAccount": this.username, "userPassword": this.password}).then(
                    function (response) {
                        //获取到响应信息，如果登录成功，进行跳转
                        console.log(response.data);
                        if (response.data.code == 1) {
                            //页面跳转
                            _window.location.href = '/web/page/main/main.html'
                        }
                        //登录失败则显示提示信息
                        _this.$message.error(response.data.msg);
                    },
                    function (err) {
                        //请求失败，友好的提示框
                        _this.$message.error("服务器烦恼，请稍后重试");
                        //控制台打印信息
                        console.log(err);
                    });
            },

            /*-----------------表单校验操作-------------------*/
            //检查输入
            checkInput() {
                if (!this.checkedUsername()) {
                    this.$message.error({
                        message: '账户为4-15位的字母、数字、下划线',
                    });
                    this.checkCode = -1;
                }else if (!this.checkedPassword()) {
                    this.$message.error({
                        message: '密码为4-15位的字母、数字、下划线',
                    });
                    this.checkCode = -1;
                } else {
                    this.checkCode = 1;
                }
            },
            //用户名校验：长度为4-15
            checkedUsername() {
                return /^[A-Za-z0-9_]{4,15}$/.test(this.username);
            },
            //密码校验：字母开头，长度为4-15
            checkedPassword() {
                return /^[A-Za-z0-9_]{4,15}$/.test(this.password);
            },


        }
    })
</script>
</html>
